<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏乐居</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="css/bottom-cav.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>

    <style>
        body{
            margin: 0px;
        }
        .max-frame{
            width:1536px;
            height: 536px;
            background-image: url(image/max-mainpage.jpg);
        }
        .top-navi{
            position: relative;
            width: 1536px;
            height: 60px;
        }
        .logo-div{
            
            margin-left: 160px;
            width: 130px;
            float: left;   
        }
       .region{
            
            float: left;
            margin-top: 20px;
            border: 2px solid white;
            border-radius: 20px;
            width: 90px;
            height: 40px;
       }
       .region-pic{
           
            width: 12px;
            height: 16px;
            display: block;
            float: left;
            margin-left: 10px;
            margin-right: 5px;
            margin-top: 10px;
       }
       a{
            text-decoration: none;
            color: black;
       }
       .cen-navi{
            margin-left: 50px;
            float: left; 
            
       }
       .cen-navi ul li{
            list-style: none;
            float: left;
       }
       .cen-navi ul li a{
            font-weight: 700;
            font-size: 18px;
            text-decoration: none;
            display: block;
            margin-top: 10px;
       }
       .log-register-button{
            margin-left: 127px;
            float: left;
            margin-top: 30px;
            display: none;

       }
       .log-register{
            float: left;
            margin-left: 10px;

       }
       .top-titlle-seach{
            height: 480px;
            
       }
       .seach{
            margin-left:350px;
       }
       .center-house{
            border-radius: 20px;
            margin-left: 130px;
            float: left;
            margin-top: 0px;
            padding-right: 40px;
      
       }
       .center-house ul{
            list-style: none;
            margin-top: -10px;
       }
       .center-house ul li{
            float: left;
            margin-left: 50px;
       }
       .bottom .name{
            font-weight: bolder;
            font-size: 20px;
            margin-top: 10px;
       }
       .bottom .name p{
            margin-bottom: -5px;
       }
       .bottom .info{
            margin-top: 20px;
       }
       .bottom .info .price{
            float: right;
            color: orangered;
            font-size: large;
            font-weight: bold;
            
       }
       #username-pic{
            margin-left: 110px;
            float: left;
            display: none;
            
           
       }
       #top-username{
            float: left;
            margin-top: 27px;
            color: rgb(42, 34, 34);
            font-weight: bold;
            font-size: 16px;
       }
       #top-exit{
        float: left;
            margin-top: 27px;
            margin-left: 10px;
            color: rgb(42, 34, 34);
            font-weight: bold;
            font-size: 16px;
       }
    </style>
</head> 
<body style="background-color: #f2f2f2;">
    <div class="max-frame">
        <!-- 顶部导航栏 -->
        <div class="top-navi">
            <div class="logo-div">
                <a class="logo" href="frontpage.html">
                    <!-- logo的图片 -->
                    <img src="image/logo2.png" width="100px" height="76px" alt="无图片">
                </a>
            </div>
            <div class="region">
                
                <!-- 选择城市的页面 -->
                <a href="search.html">
                    <span class="glyphicon glyphicon-map-marker region-pic" style="color:#e2e0e0"></span>
                    <span style="display: block;float: left;padding-top: 8px;color: white;">吴中区</span>

                </a> 
            </div>
            <div class="cen-navi">
           
                <ul class="layui-nav"  lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="frontpage.html">首页</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=0">合租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=1">整租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html">分类</a></li>
                    <li class="layui-nav-item"><a href="manager-login.html">经纪人登录</a></li>
                    <li class="layui-nav-item"><a href="javascript:void(0)" onclick="release()">发布房源</a></li>
                  </ul>
                   
                  <script>
                  //注意：导航 依赖 element 模块，否则无法进行功能性操作
                  layui.use('element', function(){
                    var element = layui.element;
                    //…
                  });
                  </script>
            </div>
            <div class="log-register-button" id = "log-register-button">
                <div class="log-register">
                    <a href="html/myself.html">
                        <img src="image/icon_people_black.png" style="float: left; margin-right: 5px;" alt="">
                    </a>
                    <a href="logpage.html">
                        <!-- <img src="image/icon_people_black.png" style="float: left; margin-right: 5px;" alt=""> -->
                        登录
                    </a>
                </div>
                <div style="float: left;margin-left: 10px;">|</div>
                <div class="log-register">
                    <a href="registerpage.html">
                        <div style="margin-top: 1px;">注册</div>
                    </a> 
                </div>
            </div>
            <div id="username-pic">
                <img src="image/picwish.png" id="head_pic" alt="" width="60px" height="60px" style="border-radius: 50px;float: left;">
                <div id = "top-username">
                    <a href="personal.html"  ><span id = "husername">余春海</span></a>
                </div>
                <div id="top-exit"><a href="javascript:void(0)" onclick="top_exit()"><span>退出</span></a></div>
            </div>
            <br>
            
        </div>
        <div class="top-titlle-seach">
             <div class="title">
                <div style="font-size: 30px;
                margin-top: 100px;margin-left: 500px;font-weight:bolder;color: rgb(77, 77, 77);">
                    要找真房源，还是苏乐居全
                </div>
                <div style="margin-left: 500px;font-weight: 800; font-size: 60px;color: rgb(77, 77, 77);">
                    开始寻找属于你的家
                </div>
             </div>
             <div class="seach">
                <div style="padding: 20px 100px 10px;">
                    <form class="bs-example bs-example-form" role="form">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="input-group input-group-lg">
                                    <div class="input-group-btn">
                                        <button id="select-one" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                             全部
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:change(0)">全部</a></li>
                                            <li><a href="javascript:change(1)">整租</a></li>
                                            <li><a href="javascript:change(2)">合租</a></li>
                                            <li><a href="javascript:change(3)">公寓</a></li>
                                        </ul>
                                    </div><!-- /btn-group -->
                                    <input type="text" class="form-control" placeholder="请输入区域、板块或小区名开始找房">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" onclick="searchSkip()">🔍</button>
                                    </span>
                                    <!-- 这里后面text框里加个地图 -->
                                </div><!-- /input-group -->
                            </div><!-- /.col-lg-6 --> <br>
                        </div><!-- /.row -->
                    </form>
                </div>
             </div>
        </div>
        <div class="center-house" style="background-color:#ececec;">
            <div style="font-size:35px; font-weight:bolder;margin-left: 50px;margin-top: 20px;">
                热门房源
            </div>
            <div style="float: left;margin-left: 50px;margin-top: 10px;">
                好房源那么多，我们为您精选
            </div>
            <div style="float: right;margin-top: 60px;">
                <a href="Classification.html" style="font-size: 18px;color:rgb(93, 93, 235);font-weight:bold;">更多苏州房源</a>
            </div>
            <div class="layui-tab layui-tab-brief " style="margin-top: 60px; width: 90%;"  lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">优质整租</li>
                    <li>放心合租</li>
                </ul>
                <div id="house-hot" class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="display:none;">合租</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">整租</div>
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>
        <div class="center-house" style="background-color:#e2e0e0;">
            <div style="font-size:35px; font-weight:bolder;margin-left: 50px;margin-top: 20px;">
                热门区域
            </div>
            <div style="float: left;margin-left: 50px;margin-top: 10px;">
                好房源那么多，我们为您精选
            </div>
            <div style="float: right;margin-top: 60px;">
                <a href="Classification.html" style="font-size: 18px;color:rgb(93, 93, 235);font-weight:bold;">更多苏州房源</a>
            </div>
            <div class="layui-tab layui-tab-brief " style="margin-top: 60px; width: 90%;"  lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">吴中区</li>
                    <li>姑苏区</li>
                    <li>吴江区</li>
                    <li>昆山区</li>
                    <li>园区</li>
                </ul>
                <div id="region-hot" class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="display:none;">吴中区</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">姑苏区</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">吴江区</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">昆山区</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">工业园区</div>
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>
        <div id="characteristic" class="center-house" style="background-color:hsl(180, 30%, 95%);">
            <div style="font-size:35px; font-weight:bolder;margin-left: 50px;margin-top: 20px;">
                地铁线路
            </div>
            <div style="float: left;margin-left: 50px;margin-top: 10px;">
                好房源那么多，我们为您精选
            </div>
            <div style="float: right;margin-top: 60px;">
                <a href="Classification.html" style="font-size: 18px;color:rgb(93, 93, 235);font-weight:bold;">更多苏州房源</a>
            </div>
            <div class="layui-tab layui-tab-brief " style="margin-top: 60px; width: 90%;"  lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">1号线</li>
                    <li>2号线</li>
                    <li>3号线</li>
                    <li>4号线</li>
                </ul>
                <div id="subway-hot" class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="display:none;">1号线</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">2号线</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">3号线</div>
                        <ul>
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <div style="display:none;">4号线</div>
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>
        <div class="log_buttom">
            <div class="log-logo">
            </div>
            <div  class="log-buttom-icon">
                <div class="glyphicon glyphicon-film" style=" color: white;width:50px;height: 50px;font-size: 50px;margin-top: 40px;margin-left: 70px;"></div>
                <div style="margin-left: 65px;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;">极速找房</div>
            </div>
            <div class="log-buttom-icon" >
                <i class="layui-icon layui-icon-service" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
                <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线客户</div>
            </div>
            <div class="log-buttom-icon" >
                <i class="layui-icon layui-icon-date" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
                <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线预约</div>
            </div>
            <div class="log-buttom-icon" >
                <i class="layui-icon layui-icon-find-fill" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
                <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">地图找房</div>
            </div>
            
        </div>
        <div class="buttom_nav">
            
                <div class="buttom_nav_center">
                    <div class="recommend-area-rent">
                        <div class="title">
                            推荐区域租房
                        </div>
                        <div class="recommend-content">
                            <span class="">
                                <a href="">吴中</a>
                                <a href="">吴江</a>
                                <a href="">园区</a>
                                <a href="">太仓</a>
                                <a href="">姑苏区</a>
                                <a href="">常说</a>
                                <a href="">平江</a>
                                <a href="">张家港</a>
                                <a href="">高新区</a>
                                <a href="">沧浪</a>
                                <a href="">相城</a>
                                <a href="">昆山</a>
                                <a href="">金阊</a>
                              </span>
                        </div>
                    </div>
                    <div  style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
                    <div class="recommend-subway-rent">
                        <div class="title">
                            推荐地铁租房
                        </div>
                        <div class="recommend-content">
                            <span class="">
                                <a href="">1号线</a>
                                <a href="">2号线</a>
                                <a href="">3号线</a>
                                <a href="">4号线支线</a>
                                <a href="">4号线</a>
                              </span>
                        </div>
                    </div>
                    <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                    <div class="Recommend-type-rent">
                        <div class="title">
                            推荐类型租房
                        </div>
                        <div class="recommend-content">
                            <span>
                                <a href="">苏州合租</a>
                                <a href="">苏州整租</a>
                                <a href="">苏州公寓</a>
                              </span>
                        </div>
                    </div>
                    <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                    <div id="about-suleju">
                        <div class="title" style="float: left;width: 200px;height: 300px;">
                            <div style="width: 200px;">
                                关于苏乐居
                            </div>
                            <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                                <span>
                                    <a href="" >伙伴登录</a>
                                    <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                                  </span>
                            </div>
                        </div>
                        <div class="title" style="float: left;width: 200px;">
                            <div style="width: 200px;">
                                苏乐居合作公寓
                            </div>
                            <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                                <span>
                                    <a href="" >青年汇</a>
                                    <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                                    <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                                  </span>
                            </div>
                        </div>
                        <div class="title" style="float: left;width: 200px;">
                            <div style="width: 200px;">
                                意见回馈
                            </div>
                            <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                                <span>
                                    <a href="" >mail:2308844@qq.com</a>
                                  </span>
                            </div>
                        </div>
                        <div class="title" style="float: left;width: 200px;">
                            <div style="width: 200px;">
                                联系苏乐居
                            </div>
                            <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                                <span>
                                    <a href="" >10106006</a>
                                    <br>
                                    <br>
                                    <a href="">周一～周日 8:00～23:00</a>
                                  </span>
                            </div>
                        </div><br>
                        <div id="max-buttom-info">
                            <div id="suleju-web-info">
                                <div style="width:300px;margin-left:-110px">
                                    ©2015 上海万间信息技术有限公司
                                </div>  
                                <a href="" style="margin-right: 25px;">
                                    隐私协议 
                                </a>
                                <a href="">服务协议</a>
                                <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路78号 金蝶软件园</div>
                                <a href=""> 沪ICP备15504537号-2    </a>
                            </div>
                            <div id="suleju-web-info">
                                <div style="width: 25px;height: 23px;
                                 margin-left: -130px;background-image: url(image/gongan.png);background-size: 100%;">
    
                                </div>
                                <a style="width:260px;margin-left:-100px">
                                    沪公网安备31011504006937号  
                                </a>  
                                <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20570251</div>
                                
                            </div>
                           
                        </div>
                        
                    </div>
                </div>
                
        </div>    
    </div>
    <script>
         //发布房源判断是否登录，否则进入登录页面
        function release(){
            let token = localStorage.getItem("token");
            if(token != null){
                window.location = "upload-house.html";
            }
            else{
                layer.msg('请先登录！', {icon: 6,anim:0});   
                setTimeout(function(){window.location.href='logpage.html';},1000);
 
            }
        }
        $(function(){
            let token = localStorage.getItem("token");
            if(token != null){
                $.ajax({
                    type:"get",
                    url:"/gewu/userLog/isLog",
                    headers:{"token":token},
                    success:function(res){   
                        if(res.code==200){
                                let username_pic = document.getElementById("username-pic");
                                let husername = document.getElementById("husername");
                                husername.innerText = res.content.username;
                                username_pic.style.display="block";
                        }
                        
                    }
                })
            }
            else{
                    let log_register = document.getElementById("log-register-button");
                    log_register.style.display="block"; 
                }
        })
        function top_exit(){   
            localStorage.removeItem("token");
            window.location.href = "frontpage.html"
        }
    </script>

    <script>
        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/rent",
            data: {
                "rentType":document.getElementById("house-hot").firstElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("house-hot").firstElementChild.lastElementChild;
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/rent",
            data: {
                "rentType":document.getElementById("house-hot").lastElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("house-hot").lastElementChild.lastElementChild;
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        //区
        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/region",
            data: {
                "area":document.getElementById("region-hot").firstElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("region-hot").firstElementChild.lastElementChild;
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/region",
            data: {
                "area":document.getElementById("region-hot").childNodes[3].firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    console.log();
                    let tbody = document.getElementById("region-hot").childNodes[3].lastElementChild;
                    
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/region",
            data: {
                "area":document.getElementById("region-hot").childNodes[5].firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    console.log();
                    let tbody = document.getElementById("region-hot").childNodes[5].lastElementChild;
                    
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/region",
            data: {
                "area":document.getElementById("region-hot").childNodes[7].firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    console.log();
                    let tbody = document.getElementById("region-hot").childNodes[7].lastElementChild;
                    
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });
 
        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/region",
            data: {
                "area":document.getElementById("region-hot").lastElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("region-hot").lastElementChild.lastElementChild;
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        //户型特色
        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/subway",
            data: {
                "subway":document.getElementById("subway-hot").firstElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("subway-hot").firstElementChild.lastElementChild;
                    //console.log();
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });
        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/subway",
            data: {
                "subway":document.getElementById("subway-hot").childNodes[3].firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("subway-hot").childNodes[3].lastElementChild;
                    //console.log();
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/subway",
            data: {
                "subway":document.getElementById("subway-hot").childNodes[5].firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("subway-hot").childNodes[5].lastElementChild;
                    //console.log();
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        $.ajax({
            type: "post",
            url : "http://localhost/gewu/houseInfor/subway",
            data: {
                "subway":document.getElementById("subway-hot").lastElementChild.firstElementChild.innerHTML,
            },
            success: function(res){
                for(let i=0;i<4;i++){
                    let tbody = document.getElementById("subway-hot").lastElementChild.lastElementChild;
                    //console.log();
                    let old = tbody.innerHTML;
                    let str =
                    `<li style="display:inline; width: 20%;">
                        <a href=" javascript:void(0)" onclick = "click_house(${res.content[i].id})">
                            <div class="wra-pic">
                                <img src="../All-Image/house_pic/${res.content[i].housePicAddress[0]}" width="265px" height="205px" alt="">
                                <span></span>
                                <span></span>
                                <div class="bottom">
                                    <div class="name">
                                        <p>${res.content[i].area}.${res.content[i].houseAddress}</p>
                                        <p>${res.content[i].community}</p>
                                    </div>
                                    <div class="info">
                                        ${res.content[i].houseType}&nbsp;&nbsp;${res.content[i].squareMeter}平米
                                        <div class="price">
                                            <span>${res.content[i].rentPrice}元1月</span>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </a>
                    </li>`
                    old += str;
                    tbody.innerHTML = old;
                }
            } 
        });

        //余春海的，点击进入房子详情
        function click_house(id){
         
            $.ajax({
                type:"post",
                url:"/gewu/house/onclick",
                success:function(res){
                    window.location.href= "house-detail.html?house_id="+id;
                }
            });
        }
        let imgs=["全部","整租","合租","公寓"];
        let selectOne = document.getElementById("select-one");
        let rentalType = "全部";

        function change(n){
            //js改变属性
            let str1 = `${imgs[n]} <span class="caret"></span>`
            rentalType = imgs[n];
            selectOne.innerHTML = str1;
        }
        
        function searchSkip(){
            let value1 = null;
            value1 = selectOne.parentNode.nextElementSibling.value;

            localStorage.setItem('rentalType',rentalType);
            localStorage.setItem('value',value1);

            location.href = 'Classification.html';
        }
    </script>
</body>
</html>